<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable :columns="columns" :initParam="initParams" :requestApi="getLouPanList" ref="proRef">
        <template #tableHeader="scope">
          <el-button type="primary" @click="opera(undefined)" v-auth="'创建楼盘'">创建楼盘</el-button>
          <el-button
            type="danger"
            v-auth="'删除楼盘'"
            @click="deleteLouPan(scope.selectedListIds)"
            :disabled="scope.selectedListIds.length === 0"
            >批量删除</el-button
          >
          <el-dropdown>
            <div class="ml-12px">
              <el-button style="margin-bottom: 0 !important">
                更多设置
                <el-icon class="ml-5px"><ArrowDown /></el-icon>
              </el-button>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="go('Disadvantage')" v-if="authApi('排行标签')">排行标签</el-dropdown-item>
                <el-dropdown-item @click="go('Price')" v-if="authApi('单价设定')">单价设定</el-dropdown-item>
                <el-dropdown-item @click="go('TotalPrice')" v-if="authApi('总价设定')">总价设定</el-dropdown-item>
                <el-dropdown-item @click="go('CommonTag')" v-if="authApi('楼盘标签')">楼盘标签</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #reference_price="{ row }">{{ row.reference_price }}元/m²</template>
        <template #cover="{ row }">
          <el-image :src="row.cover" fit="scale-down"></el-image>
        </template>
        <template #grounding="{ row }">
          <el-tag type="success" v-show="row.grounding === 1">是</el-tag>
          <el-tag type="danger" v-show="row.grounding === 0">否</el-tag>
        </template>
        <template #status="{ row }">
          <span class="px-8px py-4px" :style="{ backgroundColor: row.status_color, color: row.status_text_color }">{{
            row.status_name
          }}</span>
        </template>
        <template #create_time="{ row }">
          {{ dayjs(row.create_time).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template #active_last_time="{ row }">
          <span v-if="row.active_last_time !== 0">{{
            dayjs(dayjs.unix(row.active_last_time).format("YYYY-MM-DD HH:mm:ss")).fromNow()
          }}</span>
          <span v-else>无动态更新</span>
        </template>
        <template #residential="{ row }">
          <div>
            <div>{{ row.residential }}人</div>
            <div>
              <el-button link type="primary" @click="openGarrison(row.id)" v-if="authApi('获取驻守人员列表')">查看</el-button>
            </div>
          </div>
        </template>
        <template #opera="{ row }">
          <el-button link :icon="Tickets" type="primary" @click="go('ActiveList', { id: row.id })" v-if="authApi('动态')"
            >动态</el-button
          >
          <el-button link :icon="EditPen" type="primary" @click="go('CreateLoupan', { id: row.id })" v-if="authApi('编辑楼盘')"
            >编辑</el-button
          >
          <el-button link :icon="Delete" type="primary" @click="deleteLouPan([row.id])" v-auth="'删除楼盘'">删除</el-button>
          <el-dropdown trigger="click" class="mt-3px ml-5px">
            <el-button link :icon="Tools" type="primary">
              <span>更多</span>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="go('RoomList', { id: row.id })" v-if="authApi('户型')">户型</el-dropdown-item>
                <el-dropdown-item @click="go('LouPanSwiper', { id: row.id })" v-if="authApi('相册')">相册</el-dropdown-item>
                <el-dropdown-item @click="go('ActivityList', { id: row.id })" v-if="authApi('活动')">活动</el-dropdown-item>
                <el-dropdown-item @click="go('Platform', { id: row.id })" v-if="authApi('平台')">平台</el-dropdown-item>
                <el-dropdown-item @click="openPhone(row)" v-if="authApi('查询400语音')">查询400语音</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </ProTable>
    </div>
    <garrisonVue ref="garRef"></garrisonVue>
    <CheckPhone ref="phoneRef"></CheckPhone>
  </div>
</template>

<script setup lang="tsx">
import CheckPhone from "@/views/loupan/components/check400.vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { getSellList } from "@/api/modules/sellStatus";
import { GetRegionByAccount } from "@/api/modules/account";
import { reactive } from "vue";
import { getLouPanList, deleteLou } from "@/api/modules/loupan";
import { EditPen, Delete, Tools, Tickets } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { useAuthApis } from "@/hooks/useApi";
import { useHandleData } from "@/hooks/useHandleData";
import { ref } from "vue";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh";
import garrisonVue from "../components/garrison.vue";

dayjs.extend(relativeTime);
dayjs.locale("zh");
const proRef = ref<InstanceType<typeof ProTable> | null>();
const phoneRef = ref<InstanceType<typeof CheckPhone> | null>();
const { authApi } = useAuthApis();

// 查询400
const openPhone = (row: any) => {
  const params: any = {
    row,
    getTable: proRef.value?.getTableList
  };
  phoneRef.value?.acceptParams(params);
};

const deleteLouPan = async (ids: any) => {
  await useHandleData(deleteLou, { ids }, "删除所选内容");
  proRef.value?.getTableList();
};

const router = useRouter();

const initParams = reactive({ pageSize: 10, pageNum: 1 });

const getStatus = () => {
  return new Promise(res => {
    res({
      code: 200,
      msg: "成功",
      data: [
        { label: "上架", value: 1 },
        { label: "下架", value: 2 }
      ]
    });
  });
};

const columns: ColumnProps[] = [
  { type: "selection", width: 50 },
  { prop: "id", label: "ID", width: 60 },
  { prop: "sort", label: "排序值", width: 60 },
  { prop: "name", label: "楼盘名称", search: { el: "input" }, width: 160 },
  { prop: "cover", label: "封面", width: 150 },
  { prop: "belong_name", label: "所属区域", width: 170 },
  {
    prop: "region",
    label: "所属区域",
    isShow: false,
    search: { el: "cascader", props: { props: { checkStrictly: true, emitPath: false } } },
    enum: GetRegionByAccount,
    fieldNames: { label: "name", value: "id", children: "districts" }
  },
  { prop: "grounding", label: "上架", search: { el: "select" }, enum: getStatus, width: 80 },
  {
    prop: "reference_price",
    label: "参考价格",
    width: 120
  },
  {
    prop: "status",
    width: 100,
    label: "销售状态",
    search: { el: "select" },
    enum: getSellList,
    fieldNames: { label: "name", value: "statusCode" }
  },
  {
    prop: "residential",
    label: "驻守人数",
    width: 120
  },
  { prop: "active_last_time", label: "动态更新时间", width: 120 },
  { prop: "create_time", label: "创建时间", search: { el: "date-picker", props: { type: "daterange" } }, width: 170 },
  { prop: "opera", label: "操作" }
];

// ------------楼盘操作
const opera = (row: any) => {
  console.log(row);
  router.push({ name: "CreateLoupan" });
};

// 前往
const go = (name: string, query: any = "") => {
  try {
    router.push({ name, query });
  } catch (error) {
    console.log(error);
  }
};

// 打开助手人员
const garRef = ref<InstanceType<typeof garrisonVue> | null>();
const openGarrison = (id: number) => {
  const params: any = {
    id,
    getTable: proRef.value?.getTableList
  };
  garRef.value?.open(params);
};
</script>

<style></style>
